<template>
  <div class="app-container" style="height: 845px;background-color: #d0d0d0">
    <div style="width:415px;height: 835px;margin-top: -31px;margin-left: -19px;background-color: white">
      <p>基本信息</p>
      <img :src="residents.faceImage" class="avatar" alt="图片" style="height: 150px;width: 150px;margin-top: 5px">
      <p>姓名：{{ residents.name }}</p>
      <p style="text-align: left">证件号码：{{ residents.idNumber}}</p>
      <p style="text-align: left">类型：{{ residents.residentTypeId}}</p>
      <p style="text-align: left">性别：{{ residents.gender}}</p>
      <p style="text-align: left">出生日期：{{ birthDate }}</p>
      <p style="text-align: left">年龄：{{ age }}</p>
      <p style="text-align: left">户籍地址：{{ residents.householdAddress}}</p>
      <p style="text-align: left">联系电话：{{ residents.phoneNumber}}</p>
    </div>
    <div style="width: 1085px;height: 570px;margin-left: 402px;margin-top: -840px;background-color: #d0d0d0">
      <div style="width: 740px;height: 280px;margin-left: 0px;margin-top: 5px;background-color: white">
        <h>出行记录</h>
      </div>
      <div style="width: 435px;height: 280px;margin-left: 745px;margin-top: -280px;background-color: white" @click="personFileEstate()">
        <h>住房信息</h><br>
        <span style="margin-top: 3px">楼栋号：{{householdInfo.buildingsId}}</span> <br>
        <span style="margin-top: 3px">单元号：{{householdInfo.unitsId}}</span> <br>
        <span style="margin-top: 3px">房间号：{{householdInfo.roomNumber}}</span> <br>
        <span style="margin-top: 3px">房屋类型：{{householdInfo.roomTypeName}}</span> <br>
        <span style="margin-top: 3px">所属小区：{{householdInfo.plotName}}</span> <br>
        <span style="margin-top: 3px">所属辖区：</span> <br>
        <span style="margin-top: 3px">住房地址：</span> <br>
      </div>
      <div style="width: 740px;height: 280px;margin-left: 0px;margin-top: 5px;background-color: white">
        <h>行车轨迹</h>
      </div>
      <div style="width: 435px;height: 280px;margin-left: 745px;margin-top: -280px;background-color: white" @click="personFileVehicles()">
        <h>车辆信息</h>
        <br>
        <img :src="vehicleInfo.vehiclePhotoUrl" width="200px" height="200px">
        <p style="color: #1c84c6;margin-left: 50px">{{vehicleInfo.licensePlate}}</p>
      </div>
    </div>
    <div style="width: 1190px;height: 263px;margin-left: 402px;margin-top: -15px;background-color: white">
      <p>关联关系</p>
    </div>
  </div>
</template>

<script>

import {getVehicleInfoById} from "@/api/system/vehicles";
import {getHouseholdInfoById} from "@/api/system/smart/estate";

export default {

  data() {
    return {
      residents: {},
      //出行记录
      travelRecord: {},
      //住房信息
      householdInfo: {},
      //行车轨迹
      drivingTrack: {},
      //车辆信息
      vehicleInfo: {},
      // 出生日期
      birthDate: '',
      // 年龄
      age: '',
    };
  },
  created() {
    this.residents = this.$route.query.residents
    console.log(this.residents)
    this.getBirthDateAndAge(this.residents.idNumber);
    this.getVehicleInfoById()
    this.getHouseholdInfoById()
  },
  methods: {
    personFileEstate() {
      this.$router.push({ path: '/community/archivess/estate', query: { estate: this.householdInfo } });
    },
    personFileVehicles() {
      this.$router.push({ path: '/community/archivess/vehicles', query: { vehicles: this.vehicleInfo } });
    },
    getBirthDateAndAge(idNumber) {
      // 根据身份证号(idNumber)获取出生日期和年龄
      this.birthDate = idNumber.substring(6, 14);
      //2001-10-19
      this.birthDate = this.birthDate.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3');
      this.age = new Date().getFullYear() - this.birthDate.substring(0, 4);
    },
    /** 根据 实有人口id 获取车辆信息详情 */
    getVehicleInfoById() {
      getVehicleInfoById(this.residents.id).then(res => {
        this.vehicleInfo = res.data
      })
    },
    /** 根据 实有人口id 获取房屋信息详情 */
    getHouseholdInfoById() {
      getHouseholdInfoById(this.residents.id).then(res => {
        this.householdInfo = res.data
        console.log(this.householdInfo)
      })
    },
  }
};
</script>
<style>

</style>
